<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			@success="onFormSuccess"
		>
			<template v-slot:buyer_info="{ form, keyName }">
				<view style="height: 36px;display: flex;align-items: center;">
					<image :src="value.item.buyer_info.avatar" style="width: 50px;height: 50px;border-radius: 50%;" mode="aspectFill"></image>
					<view style="margin-left: 10px;">{{ value.item.buyer_info.nickname }}</view>
				</view>
			</template>


			<template v-slot:goods_list="{ form, keyName }">
				<view style="text-align: center;font-weight: bold;font-size: 17px;">本次退款商品列表</view>
				<el-table :data="form[keyName]" style="width: 100%" border>
					<el-table-column prop="image" label="商品封面" width="100">
						<template v-slot:default="{ row, column, $index }">
							<image :src="row.image" style="width: 50px;height: 50px;border-radius: 50%;" mode="aspectFill"></image>
						</template>
					</el-table-column>
					<el-table-column prop="goods_name" label="商品名称" minWidth="100"> </el-table-column>
					<el-table-column prop="sku_name" label="规格" minWidth="100"> </el-table-column>
					<el-table-column prop="max_refund_num" label="最大可退款数量" width="130">
						<template v-slot:default="{ row, column, $index }">
							{{ maxRefundNum(row) }}
						</template>
					</el-table-column>
					<el-table-column prop="refund_num" label="申请退款数量" width="130">
						<template v-slot:default="{ row, column, $index }">
							<vk-data-input-number-box v-model="row.refund_num" :precision="0" :step="1" controls-position="right" :max="maxRefundNum(row)" width="90px" size="small" @change="refundNumChange($event,row)"></vk-data-input-number-box>
						</template>
					</el-table-column>
					<el-table-column prop="refund_amount" label="申请退款金额" width="130">
						<template v-slot:default="{ row, column, $index }">
							<vk-data-input-money v-model="row.refund_amount" :precision="2" :disabled="maxRefundAmount(row,1)==0" :max="maxRefundAmount(row,1)" width="90px" size="small" :clearable="false"></vk-data-input-money>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<template v-slot:refund_express_amount="{ form, keyName }">
				<vk-data-input-money v-model="form[keyName]" :precision="2" :max="maxRefundExpressAmountFn(1)" width="90px" size="small" :clearable="false"></vk-data-input-money>
				<text style="margin-left: 10px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="form[keyName] = maxRefundExpressAmountFn(0)">退全部运费</text>
				<text style="margin-left: 30px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="onlyRefundFreight">只退运费</text>
				<vk-data-tips :tips="'最多可退 '+maxRefundExpressAmountFn(1)+' 元运费'"></vk-data-tips>
			</template>

			<template v-slot:refund_amount="{ form, keyName }">
				<view style="font-size: 17px;font-weight: bold;color: red;">{{ vk.pubfn.priceFilter(totalRefundAmountCom)}}</view>
				<vk-data-tips tips="若同意退款，则资金会原路返回"></vk-data-tips>
			</template>


		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: "",
					options:""
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading:false,
			page: {
				title: "订单主动退款",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "5vh",
				width:"900px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					_id:"",
					refund_express_amount:0, // 退运费金额
					status_msg:"",
					goods_list:[],
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/business/sys/order.businessOrderRefund",
					// 表单字段显示规则
					columns: [
						// 常用字段类型
						{ key: "buyer_info", title: "买家信息", type: "userInfo" },
						{ key: "goods_list", title: "退款商品", type: "text", showLabel:false, },
						{ key: "refund_express_amount", title: "退运费金额", type: "money", width: 200 },
						{ key: "refund_amount", title: "合计退款", type: "money-view", tips:"若同意退款，则资金会原路返回" },
						{
						  key:"status_msg", title:"备注", type:"textarea",
						  autosize:{ minRows:4, maxRows:10 },
						  maxlength:200,
						  showWordLimit:true,
						}
					],
					// 表单验证规则
					rules: {

					},
					labelWidth: "100px"
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value){
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value={} } = that;
			let { item } = value;

			that.form1.data._id = item._id; // 订单id
			that.form1.data.refund_express_amount = that.maxRefundExpressAmountFn(0), // 退运费金额
			that.form1.data.goods_list = item.goods_sku_list.map((goodsItem, index) => {
				let {
					_id,
					sku_id,
					buy_num = 0,
					refund_num = 0,
					should_payment_amount = 0,
					refund_amount = 0,
					goods_id,
					image,
					goods_name,
					sku_name
				} = goodsItem;
				return {
					_id,
					sku_id,
					refund_num: buy_num - refund_num, // 退款数量
					refund_amount: should_payment_amount - refund_amount, // 退款金额
					goods_id,
					image,
					goods_name,
					sku_name
				}
			});
		},
		// 监听 - 页面关闭
		onClose() {
			that.resetForm();
		},
		// 监听 - 提交成功后
		onFormSuccess(res) {
			that.close();
			vk.pubfn.objectAssignForVue(that.value.item, res.data.orderInfo, that);
			that.$emit("success");
		},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
		// 表单重置
		resetForm() {
			that.$refs.form1.resetForm();
		},
		// 表单提交
		submitForm() {
			that.$refs.form1.submitForm();
		},
		maxRefundNum(row){
			let that = this;
			let { sku_id } = row;
			let { buy_num, refund_num = 0 } = vk.pubfn.getListItem(that.value.item.goods_sku_list, "_id", sku_id);
			return buy_num - refund_num;
		},
		maxRefundAmount(row, type=0){
			let that = this;
			let { sku_id, refund_num } = row;
			let { real_price, should_payment_amount=0, refund_amount=0 } = vk.pubfn.getListItem(that.value.item.goods_sku_list, "_id", sku_id);
			let max = should_payment_amount - refund_amount;
			let amount = 0;
			if (type === 1) {
				amount = vk.pubfn.toDecimal(real_price * refund_num / 100, 2)
			} else {
				amount = vk.pubfn.toDecimal(real_price * refund_num, 0)
			}
			if (amount>max) {
				amount = max;
			}
			return amount;
		},
		refundNumChange(value, row){
			let that = this;
			let { sku_id } = row;
			let maxRefundAmount = that.maxRefundAmount(row);
			row.refund_amount = maxRefundAmount;
		},
		// 最大可退款的运费金额（单位元）
		maxRefundExpressAmountFn(type){
			let item = this.value.item;
			if (type == 0) {
				return vk.pubfn.toDecimal((item.amount_info.express_amount - item.amount_info.refund_express_amount), 0);
			} else {
				return vk.pubfn.toDecimal((item.amount_info.express_amount - item.amount_info.refund_express_amount) / 100, 2);
			}
		},
		onlyRefundFreight(){
			let that = this;
			that.form1.data.goods_list.map((item, index) => {
				item.refund_num = 0;
				that.refundNumChange(0,item);
			});
			if (!that.form1.data.refund_express_amount) {
				that.form1.data.refund_express_amount = that.maxRefundExpressAmountFn(0);
			}
		}
	},
	watch: {

	},
	// 计算属性
	computed: {
		// 合计商品退款金额
		totalRefundGoodsAmountCom(){
			let m = 0;
			this.form1.data.goods_list.map((item, index) => {
				m += item.refund_amount;
			});
			return m;
		},
		// 合计退款金额
		totalRefundAmountCom(){
			// 商品合计 + 运费
			return this.totalRefundGoodsAmountCom + this.form1.data.refund_express_amount;
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
